<template>
  <div class="srarch_container">
    <div class="wrapper">
      <input type="text" @keyup.enter="SearchClick" v-model="searchText" placeholder="请输入要搜索的商品">
      <button @click="SearchClick">
        <SearchOutlined />
        <span>搜索</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { useGoodsStore } from '@/stores/module/goods/goods';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

const goodsStore = useGoodsStore();
const searchText = ref<string>('')
function SearchClick() {
  router.push({
    path: '/main',
    query: { description: searchText.value },
  });
  goodsStore.searchParams.description = searchText.value; // 更新搜索参数
  goodsStore.initGoodsList({ description: goodsStore.searchParams.description }).then(() => {
  });
}
// 页面加载时，根据路由参数初始化数据
onMounted(() => {
  const description = route.query.description || '';
  goodsStore.searchParams.description = description
  searchText.value = description as string; // 将路由参数同步到搜索框
  goodsStore.initGoodsList({ description }); // 根据路由参数加载数据
});

// 监听路由参数变化，重新加载数据
watch(() => route.query.description, (newDescription) => {
  searchText.value = newDescription as string; // 更新搜索框内容
  goodsStore.searchParams.description = newDescription as string; // 更新搜索参数
  goodsStore.initGoodsList({ description: goodsStore.searchParams.description }); // 根据新参数加载数据
});
</script>

<style lang="less" scoped>
@import "../../../assets/css/primary/index.less";

.srarch_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .wrapper {
    width: 484px;
    height: 40px;
    border-radius: 18px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;

    input {
      height: 30px;
      width: 388px;
      border: none;
      outline: none;
      margin-left: 12px;
    }

    button {
      cursor: pointer;
      height: 32px;
      width: 68px;
      margin-left: 5px;
      background-color: @primary-color;
      border: @primary-color;
      border-radius: 14px;

    }
  }
}
</style>
